<template>
	<view>
		<benben-popup
			v-model="isShow"
			:mask="true"
			:mask-close-able="false"
			mode='center'
		>
			<view class="flex benben-flex-layout flex-wrap align-center">
				<view class='flex flex-direction flex-wrap align-center'>
					<view
						class=' simplifiedPaper_fd6_0_c0'
						style="display: block;"
					>
						<view
							class="flex align-center justify-between"
							style="width: 100%;box-sizing: border-box;padding: 0 32rpx;"
						>
							<text class='simplifiedPaper_fd6_0_c0_c0'>语音</text>
							<image
								v-if="!isOpenLoading"
								class='simplifiedPaper_fd6_0_c1'
								style="margin: 0;"
								mode="aspectFit"
								:src='STATIC_URL+"54.png"'
								@click.stop="isShow=false"
							></image>
						</view>

						<view
							class="line"
							style="margin: 32rpx;border-bottom: 1px solid #aaa;"
						></view>

						<view v-if="isOpenLoading">
							<view style="text-align: center;color: #aaa;">{{showTimeStr}}s</view>
							<image
								@click="endIdentify"
								:src="STATIC_URL + '177.png'"
								mode="aspectFit"
								style="width: 150rpx;height:150rpx;margin: 36rpx auto 0;display: block;"
							></image>
							<view style="text-align: center;color: #999;margin-top: 32rpx;">
								<view>聆听中...</view>
								<view>点击结束聆听</view>
							</view>
						</view>
						<view v-else>
							<image
								@click="startIdentify"
								:src="STATIC_URL + '176.png'"
								mode="aspectFit"
								style="width: 150rpx;height:150rpx;margin: 72rpx auto 32rpx;display: block;"
							></image>
							<view style="text-align: center;color: #999;margin-top: 48rpx;">
								<view>点击“麦克风”，开始说话</view>
								<view>请允许设备麦克风权限</view>
							</view>
						</view>

					</view>
				</view>
			</view>
		</benben-popup>

		<!-- 语音识别 -->
		<lyuan-tx-asr
			ref="asr"
			:ctn.sync="resultStr"
			:uploadMethod="uploadFile"
			@change="asrChange"
			@fileChange="fileChange"
			:appId="TX_AUDIO_APPID"
			:secretId="TX_AUDIO_SECRET_ID"
			:secretKey="TX_AUDIO_SECRET_KEY"
		></lyuan-tx-asr>

		<u-modal
			v-model="isShowWxAuthorNotice"
			content="使用语音功能需要开启麦克风权限是否现在去开启？"
			confirm-text="去开启"
			cancel-color="#999"
			confirm-color="#242788"
			show-cancel-button
			@confirm="toWxAuthonFn"
		/>
	</view>
</template>

<script>
	/**
	 * 通讯说明
	 */
	import { TX_AUDIO_APPID, TX_AUDIO_SECRET_ID, TX_AUDIO_SECRET_KEY, } from "@/const"
	export default {
		props: {
			value: Boolean,
		},
		computed: {
			isShow: {
				get() { return this.value },
				set(val) { this.$emit('input', val) }
			}
		},
		data() {
			return {
				TX_AUDIO_APPID,
				TX_AUDIO_SECRET_ID,
				TX_AUDIO_SECRET_KEY,
				isOpenLoading: false,
				resultStr: '', // 识别道的文字
				startParams: null, // 开始参数
				timer: null,
				showTimeStr: 1,
				status: "",
				isShowWxAuthorNotice: false,
			}
		},
		beforeDestroy() { clearInterval(this.timer) },
		methods: {
			/** 去微信授权界面 */
			toWxAuthonFn() { wx.openSetting() },
			/** 开始识别 */
			startIdentify() {
				console.log("开始识别 startIdentify");
				if (this.isOpenLoading) return;
				const starFn = _ => {
					console.log("开始执行语音识别__");
					this.isOpenLoading = true;
					this.status = 1;
					this.$refs.asr.start();
					this.timer = setInterval(() => this.showTimeStr++, 1000);
				}
				// #ifdef MP-WEIXIN
				wx.authorize({
					scope: "scope.record",
					success: () => starFn(),
					fail: () => this.isShowWxAuthorNotice = true,
				})
				// #endif

				// #ifndef MP-WEIXIN
				console.log("APP 端识别__");
				// #endif

			},
			/** 结束识别回调 */
			endIdentify() {
				console.log("识别结束 endIdentify");
				this.isShow = false;
				this.isOpenLoading = false;
				if (this.resultStr) this.$emit('confirm', this.resultStr);
				else this.$msg('未识别到内容，请重试')
				this.$refs.asr.stop();
				this.resultStr = '';
				this.showTimeStr = 1;
				clearInterval(this.timer);
				this.status = 3;
			},
			asrChange(res) { this.resultStr = res; },
			fileChange({ file, content }) { console.log('录音文件', file); },
			uploadFile(tempFilePath) {
				return new Promise((resolve, reject) => {

					console.log("api 实现__");
					reject("采用接口api实现"); // 上班后进行接口对接

					// ________________________________
					//调用你的接口把音频文件转为文字
					// this.$minApi
					// 	.upload('txasr/SentenceRecognition', null, tempFilePath)
					// 	.then(res => {
					// 		if (res.code == 1) {
					// 			resolve(res.data.Result);
					// 		} else {
					// 			reject(e);
					// 		}
					// 	})
					// 	.catch(e => {
					// 		reject(e);
					// 	});
				});
			}

		}
	}
</script>

<style
	lang="scss"
	scoped
>
	@import './../digitalPersonUseMessage.scss';

	::v-deep .asr-container {
		width: 0;
		height: 0;
		overflow: hidden;
	}
</style>